<template>
  <div class="started">
    <div class="wrapper">
      <div class="left">
        当前已经为广大用户完成
        <span class="num">{{ num.toLocaleString() }}</span>
        份回收
      </div>
      <router-link class="right" to="/guide">立即使用</router-link>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 0,
      target: 1109937534,
    };
  },
  created() {
    this.grow();
  },
  methods: {
    grow() {
      setTimeout(() => {
        this.num += 19937534;
        if (this.num < this.target) {
          this.grow();
        }
      }, 15);
    },
  },
};
</script>

<style scoped>
.started {
  height: 143px;
}

.wrapper {
  /* width: 1000px; */
  /* padding: 47px 20px; */
  padding-top: 47px;
  padding-bottom: 47px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* margin-left: auto; */
  /* margin-right: auto; */
  font-size: 14px;
  color: #999;
  border-block-end: 1px solid rgb(221, 221, 221);
}

.num {
  font-size: 30px;
  margin-right: 2px;
  color: #58a6e7;
}

.right {
  display: inline-block;
  height: 46px;
  padding: 0 41px;
  background-color: #80c200;
  border: 1px solid #80c200;
  border-radius: 7px;
  text-align: center;
  line-height: 46px;
  font-size: 18px;
  text-decoration: none;
  color: #fff;
}

.right:hover {
  background-color: rgb(90, 174, 0);
}
</style>
